﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载图层控件（自定义）</title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
</head>
<body>

    <div id="map">
        
    </div>
    <script type="text/javascript">
        

        //坐标参考系
        var projection = ol.proj.get("EPSG:3857");
        //分辨率
        var resolutions = [];
        for (var i = 0; i < 19; i++) {
            resolutions[i] = Math.pow(2, 18 - i);
        }
        var tilegrid = new ol.tilegrid.TileGrid({
            origin: [0, 0],
            resolutions: resolutions
        });
        //拼接百度地图出图地址
        var baidu_source = new ol.source.TileImage({
            //设置坐标参考系
            projection: projection,
            //设置分辨率
            tileGrid: tilegrid,
            //出图基地址
            tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                if (!tileCoord) {
                    return "";
                }
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = tileCoord[2];

                if (x < 0) {
                    x = "M" + (-x);
                }
                if (y < 0) {
                    y = "M" + (-y);
                }
                return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
            }
        });
        //百度地图
        var baidu_layer = new ol.layer.Tile({
            source: baidu_source,
            name: "百度地图"
        });
        //地图容器
        var map = new ol.Map({
            target: 'map',
            layers: [baidu_layer],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
       

    </script>
</body>
</html>
